<template>
	<view class="index-container">
         <mySearch v-if="searchShow"></mySearch>
			<!-- 轮播图 S -->
	        <swiper class="banner">
	            <swiper-item v-for="item in banner" :key="item.id">
                <navigator :url="'/pkgGood/detail/detail?id'+item.goods_id">
	                <image class="img" mode="widthFix" :src="item.image_url"></image>
                  </navigator>
	            </swiper-item>
	        </swiper>
	        <!-- 轮播图 E -->
          <!-- 通知组件 S -->
          <u-notice-bar :text="notice"></u-notice-bar>
          <!-- 菜单区域 S -->
          <u-grid :border="false" col="5">
              <u-grid-item v-for="item in channel" :key="item.id" @click="goCate">
                  <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
                  <text class="menuText">{{item.name}}</text>
              </u-grid-item>
          </u-grid>
          <!-- 菜单区域 E -->
          <!-- 商品分类 S -->
          <view class="goodContainer" v-for="item in categoryList" :key="item.id">
              <view class="titleBox">
              <text  @click="goCate">{{item.name}}</text>
              </view>
              <!-- 商品列表 S-->
              <goodList :list="item.goodsList" :desc="true"></goodList>
              <!-- 商品列表 E-->
          </view>
          <!-- 商品分类 E -->
	    </view>
</template>
<script>

	export default {
		name:'Index',
		data() {
			return {
				  // 1. 定义相关数据变量
                desc:false,
				        banner:[],
				        categoryList:[],
				        channel:[],
				        notice:'',
                searchShow:false
			}
		},
		onShow() {
      this.getIndexData()
      this.searchShow = true
    },
    onHide() {
       this.searchShow = false
    },
		methods: {
       async getIndexData(){
         const res = await uni.$http.get('/index/appInfo')
         console.log(res);
         this.banner = res.banner
         this.categoryList = res.categoryList
         this.channel = res.channel
         // console.log(res.notice.map((item,index)=>(index+1)+'.'+item.content).join(' '));
         this.notice = res.notice.map((item,index)=>(index+1)+'.'+item.content).join(' ')
       },
       goCate(){
         uni.switchTab({
           url:'/pages/cate/cate'
         })
       }
    }
	}
</script>
<style lang="scss" scoped>
  .banner{
  	.img{
  		width: 100%;
  	}
  }
  .menuImg{
  	width: 80rpx;
  }
  .menuText {
  	color: #888;
  }
  .titleBox{
  	margin: 10rpx 0;
  	background-color: #fafafa;
  	padding: 20rpx 0;
  	box-sizing: border-box;
  	text-align: center;
  	text{
  		display: inline-block;
  		border-bottom: 4rpx solid #409eff;
  		color: #333;
  		font-size: 28rpx;
  	}
  }
  .goodContainer{
  	padding: 0 20rpx;
  }
</style>